<template>
  <div class="container shop-detail">
    <!-- <van-nav-bar
      title="店铺详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    /> -->
    <div class="shop-infos">
      <div class="shop-pic" v-bind:style="{backgroundImage:'url(' + shopInfo.HeadUrl + ')'}">
          <span v-if="!shopInfo.HeadUrl">暂无图片</span>
      </div>
       <div class="shop-name">{{shopInfo.UserName}}</div>
       <div class="clearfix" style="padding:0 10px;">
        <div class="shop-type">{{shopInfo.ShopType}}</div>
        <div class="text-right btn-focus" v-if="userType=='0'">
            <van-button type="danger" v-if="shopInfo.Attention" size="small" @click="cancelAttentionShop">取消关注</van-button>
            <van-button type="danger" v-else size="small" @click="attentionShop">关注</van-button>
          </div>
       </div>
       <div class="address clearfix">
         <div class="address-div"><van-icon name="location-o" /> {{shopInfo.Floor}}F/{{shopInfo.Address}}</div>
         <div class="btn-row"><van-button plain type="danger" size="small" @click="toMap">查看</van-button></div>
       </div>
    </div>
    <!-- <div class="shop-info">
      <div class="flex">
        <div class="shop-pic">
          <van-image
                  width="2.666667rem"
                  height="2.666667rem"
                  style="backgound-color:#fff;"
                  fit="cover"
                  :src="shopInfo.HeadUrl"
                  error="@/assets/logo.jpg"
                  v-if="shopInfo.HeadUrl"
                />
          <img v-else class="shop-logo" src="@/assets/logo.jpg">
        </div>
        <div class="flex-1">
          <div class="shop-name">{{shopInfo.UserName}}</div>
          <div class="shop-type">{{shopInfo.ShopType}}</div>
          <div class="text-right" v-if="userType=='0'">
            <van-button type="danger" v-if="shopInfo.Attention" size="mini" @click="cancelAttentionShop">取消关注</van-button>
            <van-button type="danger" v-else size="mini" @click="attentionShop">关注</van-button>
          </div>
        </div>
      </div>
    </div> -->
    
    <!-- <div class="shop-address flex">
      <div class="flex-1">
        <van-cell :title="shopInfo.Floor+'F/' + shopInfo.Address" icon="location-o" />
      </div>
      <div class="btn-row">
        <van-button plain type="danger" size="mini" @click="toMap">查看</van-button>
      </div>
    </div> -->

    <div class="shop-desc">
      <van-tabs v-model="active">
        <van-tab title="店铺简介">
          <div class="shop-text">
            {{shopInfo.ShopDetail}}
          </div>
        </van-tab>
        <van-tab title="店铺活动">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <div class="coupon-list-row">
              <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多数据了"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                @load="getShopActivetysList"
              >
              <div class="coupon-list" v-for="(item,index) in couponList" :key="index">
                <div class=""> 
                  <div class="coupon-list-main-left">
                    <div class="imgs" v-if="item.Photo" :style="{backgroundImage:'url(' + item.Photo + ')'}"></div>
                    <div class="imgs" v-else style="background-image:url('//i1.mallcoo.cn/sp_mall/6a45na11-b6ec-4b90-85d8-a781f20f3677_750x340_1_0_80.jpg');"></div>
                  </div>
                  <div class="coupon-list-main">
                    <div class="coupon-name">{{item.Name}}</div>
                    <div class="coupon-type">{{item.Remark}}</div>
                    <div class="coupon-desc">活动时间：{{item.StartTimeStr}} - {{item.EndTimeStr}}</div>
                    <div class="get-btn">
                      <van-button type="info" class="login-btn" @click="getActivitysCoupon(item.Id)" size="small">领取</van-button>
                    </div>
                  </div>
                </div>
              </div>
              </van-list>
            </div>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
      
    </div>
  </div>
</template>

<script>
//import { msToDate } from '@/until/until';
export default {
  name: 'shopDetail',
  data() {
    return {
      active:0,
      shopId:'',
      isLoading: false,
      error: false,
      loading: false,
      finished: false,
      couponList:[],
      shopInfo:null,
      userType:''
    };
  },
  mounted() {
    this.shopId = this.$route.query.shopId;
    this.getCompanyUserInfo();
    this.userType = localStorage.getItem("userType");
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    toMap(){
      this.$router.push({
        path:'/shopMap',
        query:{floor:this.shopInfo.Floor}
        });
    },
    onRefresh() {
      setTimeout(() => {
        this.getShopActivetysList();
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 500);
    },
    getShopActivetysList(){
      this.$api.mine.getShopActivetysList(this.shopId).then(res=> {
        console.log(res);
        this.couponList = res.Data;
         // 加载状态结束
        this.loading = false;
         // 数据全部加载完成
        this.finished = true;
      }).catch(() => {
        this.error = true;
      })  
    },
    attentionShop(){
      this.$api.mine.attentionShop(this.shopId).then(res=> {
        if(res.IsSuccess){
          this.$toast('关注成功');
          this.shopInfo.Attention = !this.shopInfo.Attention
        }
      })    
    },
    cancelAttentionShop(){
      this.$api.mine.cancelAttentionShop(this.shopId).then(res=> {
        if(res.IsSuccess){
          this.$toast('已取消关注');
          this.shopInfo.Attention = !this.shopInfo.Attention
        }
      })    
    },
    getCompanyUserInfo(){
      this.$api.mine.getShopInfo({shopId: this.shopId}).then(res=> {
        if(res.IsSuccess){
          console.log(res)
          let data = res.Data;
          this.shopInfo = data
        }
      })    
    },
    getActivitysCoupon(id){
      sessionStorage.setItem('redirectUser','redirectUser');
      this.$api.mine.shopActivity(id).then(res=> {
        if(res.IsSuccess){
          this.$toast('领取成功');
          sessionStorage.removeItem('redirectUser');
        }
      })    
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.shop-detail {
  .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
  .shop-infos {
    .shop-pic {
      height: 300px;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .shop-name {
      font-size: .48rem;
      padding: 10px;
    }
    .shop-type {
      font-size: .373333rem;
      color: #999;
      float: left;
      height: 36px;
      line-height: 36px;
    }
    .btn-focus {
      float: right;
      .van-button {
        float: right;
      }
    }
    .address {
      clear: both;
      padding:5px 10px;
      background-color: #fff;
      margin-top: 5px;
      .address-div{
        float: left;
        font-size: .373333rem;
         height: 30px;
      line-height: 30px;
      }
      .btn-row{
        float: right;
        .van-button {
        float: right;
      }
      }
    }
  }

  .shop-info {
    padding: .533333rem;
    .shop-pic {
      width: 2.933333rem;
      .shop-logo {
        width: 2.666667rem;
        height: 2.666667rem;
        border-radius: .16rem;
      }
      .van-image__error{
        background-color:#fff;
      }
    }
    .shop-name {
      font-size: .48rem;
    }
    .shop-type {
      font-size: .373333rem;
      margin-top: .266667rem;
      color: #999;
    }
  }
  .shop-address {
    .btn-row {
      background-color: #fff;
      width: 1.6rem;
      text-align: right;
      padding-right: .533333rem;
    }
  }
  .shop-desc {
    padding: .4rem .533333rem;
    background-color: #fff;
    margin-top: .266667rem;
    .shop-label {
      font-size: .426667rem;
      margin-bottom: .266667rem;
    }
    .shop-text {
      font-size: .373333rem;
      margin-top: .4rem;
    }
  }
  .coupon-list-row {
    margin-top: .133333rem;
    .coupon-list {
      background-color: #fff;
      font-size: .373333rem;
      margin-bottom: .266667rem;
      .imgs{
        width: 100%;
        background-size: cover;
        background-position: center center;
        height: 4.266667rem;
      }
      .coupon-list-main {
        padding: .266667rem;
      }
      .text-row{
        padding: .266667rem .4rem;
      }
      .coupon-name {
        font-size: .426667rem;
        margin-bottom: .106667rem;
      }
      .coupon-desc {
        margin-top: .133333rem;
        font-size: .32rem;
        color: #999;
      }
      .coupon-type {
        font-size: .32rem;
        color: #d28d0a;
        margin-top: .133333rem;
      }
      .get-btn{
        text-align:right;
        margin-top: .133333rem;
      }
      .text {
        font-size: .32rem;
        color: #999;
      }
      .coupon-money-row {
        color:#f44;
        font-size: .373333rem;
        .coupon-money {
          font-size: .64rem;
        }
      }
    }
  }
}
</style>